<template>
  <view class="repair-container">
    <view class="repair-header">
      <text>我的报修</text>
    </view>
    <view class="repair-list">
      <view v-for="fault in faults" :key="fault.id" class="repair-item">
        <text>{{ fault.description }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      faults: [] // 存储报修数据
    };
  },
  onLoad() {
    this.fetchFaults();
  },
  methods: {
    fetchFaults() {
      const phoneNumber = wx.getStorageSync('phoneNumber');
      wx.request({
        url: `http://127.0.0.1:8500/own/queryMyFault?phoneNum=${phoneNumber}`,
        method: 'POST',
        success: (res) => {
          console.log('获取报修数据成功:', res.data);
          if (res.data.code == 200) {
            this.faults = res.data.data;
          } else {
            console.error('获取报修数据失败');
          }
        },
        fail: (error) => {
          console.error('请求报修数据失败', error);
        }
      });
    }
  }
};
</script>

<style>
.repair-container {
  background-image: url('@/static/images/3.png'); /* 与 mine.vue 相同的背景图 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.repair-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff; /* 确保文字在背景上可见 */
}

.repair-list {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 10px;
}

.repair-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.repair-item:last-child {
  border-bottom: none;
}
</style>